import React, { Component } from "react";
import { connect } from "react-redux";

import bankCardImg from "@images/icon/new-open-card.png";
import "./index.scss";
import yhTools from "@tools/yh";
import openSuccess from "@images/imageXHB/open_success.png";
import openFaile from "@images/imageXHB/open_faile.png";
// 组件
import MainLayout from "@component/mainLayout/mainLayout";
import Button from "@component/button/index";
// import BackModal from "@component/backModal/index";
import PaySmsModal from "../components/paySmsModal";
import AgreeCheckbox from "@component/agreeCheckbox/index";
import { Toast } from "antd-mobile";

const callPhoneData = {
	telphone: 4008219666
};
/**
 * 小辉宝开通结果页
 *
 */

@connect(state => ({
	lnid: state.getAppPlatformsDatas.lnid,
	getAppPlatformsDatas: state.getAppPlatformsDatas
}))
class OpenAccountResult extends Component {
	constructor(props) {
		super(props);
		this.state = {
			status: "",
			cardNo: "",
			isVisible: false,
			processNo: "",
			isDisabled: false,
			isRead: false,
			payIsVisible: false // 是否显示开通支付弹窗
		};
	}
	componentDidMount() {
		const status = yhTools.getUrlParam("status");
		const cardNo = yhTools.getUrlParam("cardNo");
		this.setState({
			status,
			cardNo: this.formatCard(cardNo)
		});
	}
	/**
	 * 开通支付
	 */
	openPay = () => {
		const { isRead } = this.state;
		if (!isRead) {
			return Toast.info("请先勾选协议");
		}
		this.setState({ payIsVisible: true });
	};
	restart = () => {
		this.props.history.push("/xhbBalanceNoAccount");
	};
	clickBtn = () => {
		const { status } = this.state;
		status === "success" && this.openPay();
		status === "fail" && this.restart();
	};
	formatCard = value => {
		// return value.replace(/\s/g, "").replace(/(\d{4})(?=\d)/g, "$1 ");
		return value;
	};
	// showModal = () => {
	// 	this.props.history.push("/xhbBalanceNoAccount");
	// };
	// onModalClick = booleanValue => {
	// 	this.setState({
	// 		isVisible: false
	// 	});
	// 	!booleanValue && this.props.history.push("/xhbBalanceNoAccount");
	// };

	callPhone = () => {
		yhTools.callPhone(callPhoneData).then(
			() => { },
			() => { }
		);
	};
	closePayModal = () => {
		this.setState({
			payIsVisible: false
		});
	};
	toggleAgree(e) {
		if (e) {
			e.stopPropagation();
		}
		this.setState(prevState => {
			return { isRead: !prevState.isRead };
		});
	}
	// 用户协议
	onGoAgreement = () => {
		this.props.history.push({
			pathname: "/HTPayServiceAgreement"
		});
	};
	render() {
		const { status, cardNo, isVisible, payIsVisible, isRead } = this.state;
		const { lnid, history } = this.props;
		const isSuccess = status === "success";
		const _pageParams = {
			header: {
				title: `开通结果`,
				goBackPath: isSuccess ? "xhbBalanceAccountOpened" : "xhbBalanceNoAccount"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams}>
				{/* <BackModal
					product={lnid}
					isVisible={isVisible}
					onClick={this.onModalClick}
				/> */}
				<div className="xhbopen-account-result-container">
					<div className="bg-white">
						{isSuccess ? (
							<>
								<div className="success-icon-box">
									<img className="success-icon" src={openSuccess} alt="" />
								</div>
								<p className="remind">恭喜您成功开通电子账户</p>
								<p className="remind-tip">开通支付还需一步</p>
								<div
									className="card"
									style={{
										height: 0,
										paddingBottom: "60.5%",
										background: `url(${bankCardImg})`,
										backgroundSize: "cover"
									}}
								>
									<span className="card-no">{cardNo}</span>
								</div>
								<div className="agree-wrapper mt36 ml30">
									<AgreeCheckbox
										checked={isRead}
										onChange={this.toggleAgree.bind(this)}
									>
										{
											<span className="multi-line">
												<a onClick={this.toggleAgree.bind(this)}>阅读并同意</a>
												<a onClick={this.onGoAgreement} className="font-link">
													《支付服务协议》
												</a>
											</span>
										}
									</AgreeCheckbox>
								</div>
							</>
						) : (
							<div>
								<div className="faile-icon-box">
									<img className="faile-icon" src={openFaile} alt="" />
								</div>
								<p className="remind">电子账户开通失败</p>
								<p className="tip">
									失败原因：绑卡认证失败，请尝试重新开通，
									如有疑问请联系华通银行客服
								</p>
								<p className="phone" onClick={this.callPhone}>
									<a>400-8219-666</a>
								</p>
							</div>
						)}
					</div>
					<Button className="button" onClick={this.clickBtn}>
						{isSuccess ? "确认并开通" : "重新开通"}
					</Button>
				</div>
				{/* {isSuccess && <p className="bank-resource">电子账户由华通银行提供</p>} */}
				{/* 支付签约 */}
				<PaySmsModal
					closeClick={this.closePayModal}
					modProps={{ visible: payIsVisible }}
					history={history}
				></PaySmsModal>
			</MainLayout>
		);
	}
}

export default OpenAccountResult;
